var RosterDetailsController = function() {
    this.rosterDetailsDiv = document.createElement('div');
    this.rosterDetailsDiv.className = 'rosterDisplay';
    this.rosterDetailsDiv.id = 'rosterDetails';

    var nameDiv = dh.append(this.rosterDetailsDiv, {tag: 'div', id: 'rosterNameDiv'});
    this.nameSpan = dh.append(nameDiv, {tag: 'span', html: 'put name here'});
    var peopleOnRosterDiv = dh.append(this.rosterDetailsDiv, {tag: 'div', cls: 'peopleOnRoster',
        children: [{tag: 'span', html: 'people on roster'} ]});
    var listArea = dh.append(peopleOnRosterDiv, {tag: 'div', cls: 'listArea', id: 'rosterPeopleListArea'});
    this.listElement = dh.append(listArea, {tag: 'ul'});
    new YAHOO.util.DDTarget(listArea, this.getDragableGroup());
}

RosterDetailsController.prototype.getWidget = function() {
    return this.rosterDetailsDiv;
}

RosterDetailsController.prototype.loadRoster = function(roster) {
    this.roster = roster;
    this.setName(roster.name);
    this.loadPeople();
}

RosterDetailsController.prototype.getRoster = function () {
    return this.roster;
};

RosterDetailsController.prototype.loadPeople = function() {
    RosterService.getPeopleOnRoster(this.roster.id, this.displayPeople);
}

RosterDetailsController.prototype.displayPeople = function(peopleList) {
    updateList(this.listElement, peopleList, function() {
    });
}

RosterDetailsController.prototype.setName = function(name) {
    this.nameSpan.innerHTML = name;
}

RosterDetailsController.prototype.getDragableGroup = function() {
    return "RosterPeople";
}

var rosterDetailsController = new RosterDetailsController();